<template>
	<view class="chat-box">
		<!-- 	<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">{{pageTitle}}</block>
		</cu-custom> -->
		<u-navbar :fixed="true" @leftClick="leftClick" :title="pageTitle.replace(/\[[\d]+\]/g, '')" :autoBack="true"
			leftIconSize="30">
		</u-navbar>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" :class="popupLayerClass" scroll-y="true"
				:scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView"
				@scrolltoupper="loadHistory" upper-threshold="50">
				<!-- 加载历史数据waitingUI -->
				<view class="loading">
					<view class="spinner">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view>
					</view>
				</view>
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.id">
					<!-- 系统消息 -->
					<block v-if="row.type=='system'">
						<view class="system">
							<!-- 文字消息 -->
							<view v-if="row.msg.type==5" class="text">
								{{row.msg.content.text}}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type=='user'">
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.isSendYour">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 文字消息 -->
								<view v-if="row.msg.type == 1" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语言消息 -->
								<!-- <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id?'play':''">
									<view class="length">{{row.msg.content.length}}</view>
									<view class="icon my-voice"></view>
								</view> -->
								<!-- 图片消息 -->
								<view v-if="row.msg.type == 2" class="bubble img" @tap="showPic(row.msg)">
									<image class="msgImg" mode="aspectFill"
										:src="row.msg.content.text? $u.fileBaseUrl+ row.msg.content.text :'../../static/images/index/zwtp.png' ">
									</image>
								</view>
								<!-- 名片消息 -->
								<view v-if="row.msg.type==3" class="bubble card">
									<image class="msgImg" mode="aspectFill" :src="row.msg.content.avatar"
										@tap="showPic(row.msg)">
									</image>
									<view class="cardright">
										<view class="cardname">
											{{row.msg.content.nickname}}
										</view>
										<view class="cardcareer">

										</view>
										<view class="cardphone">
											联系方式:{{row.msg.content.phone}}
										</view>
									</view>
								</view>
							</view>
							<!-- 右-头像 -->
							<view class="right">
								<image
									:src="row.msg.userinfo.face ? row.msg.userinfo.face :'../../static/images/me/default-avatar-orange.png' "
									mode="aspectFill"></image>
							</view>
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="!row.isSendYour">
							<!-- 左-头像 -->
							<view class="left">
								<image
									:src="row.msg.userinfo.face ? row.msg.userinfo.face :'../../static/images/me/default-avatar-orange.png'"
									mode="aspectFill"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.msg.userinfo.username}}</view>
									<view class="time"> {{formatMessageTime(row.msg.time)}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.msg.type==1" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语音消息 -->
								<!-- <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id?'play':''">
									<view class="icon other-voice"></view>
									<view class="length">{{row.msg.content.length}}</view>
								</view> -->
								<!-- 图片消息 -->
								<view v-if="row.msg.type==2" class="bubble img" @tap="showPic(row.msg)">
									<image class="msgImg" mode="aspectFill" :src="$u.fileBaseUrl+ row.msg.content.text">
									</image>
								</view>
								<!-- 名片消息 -->
								<view v-if="row.msg.type==3" class="bubble card">
									<!-- <view class="bubble card" @tap="showPic(row.msg)"> -->
									<image class="msgImg" mode="aspectFill"
										:src="row.msg.content.avatar? row.msg.content.avatar :'../../static/images/me/default-avatar-orange.png'"
										@tap="showPic(row.msg)">
									</image>
									<view class="cardright">
										<view class="cardname">
											{{row.msg.content.nickname}}
										</view>
										<view class="cardcareer" v-if="row.msg.content.type==2">
											职业:摄影师
										</view>
										<view class="cardcareer" v-if="row.msg.content.type==3">
											职业:司机
										</view>
										<view class="cardphone" @click="getPhone(row.msg.content.phone)">
											联系方式:{{row.msg.content.phone}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<!-- https://zhoukaiwen.com/img/icon/emojj1/1.png -->
						<image mode="widthFix" :src="'https://zhoukaiwen.com/img/icon/emojj1/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
					</view>
					<view class="box" @tap="camera">
						<view class="icon paizhao"></view>
					</view>
					<view class="box" @tap="businesscard">
						<image src="../../static/images/index/mp.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box cu-bar tabbar" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- <view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- <view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view> -->
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" cursor-spacing="20" />
					</view>
					<view :style="{'height':(showKeyNum==1?400:keyboardHeight)+'rpx'}"> </view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<!-- <view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view> -->
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
	</view>
</template>
<script>
	// import upload from "@/api/upload.js"
	// import {
	// 	getChatMessageApi,
	// 	sendMessageApi
	// } from "@/api/index.js"
	// import {
	// 	getToken
	// } from "@/utils/userStorage.js"
	export default {
		data() {
			return {
				chatId: "",
				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				myuid: 0,

				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				emojiList: [
					[{
						"url": "1.png",
						alt: "[微笑]"
					}, {
						"url": "2.png",
						alt: "[生气]"
					}, {
						"url": "3.png",
						alt: "[坏笑]"
					}, {
						"url": "4.png",
						alt: "[难受]"
					}, {
						"url": "5.png",
						alt: "[困]"
					}, {
						"url": "6.png",
						alt: "[偷看]"
					}, {
						"url": "7.png",
						alt: "[难过]"
					}, {
						"url": "8.png",
						alt: "[斜眼]"
					}, {
						"url": "9.png",
						alt: "[委屈]"
					}, {
						"url": "10.png",
						alt: "[害羞]"
					}, {
						"url": "11.png",
						alt: "[裂开]"
					}, {
						"url": "12.png",
						alt: "[偷笑]"
					}, {
						"url": "13.png",
						alt: "[痛苦]"
					}, {
						"url": "14.png",
						alt: "[白眼]"
					}, {
						"url": "15.png",
						alt: "[丑]"
					}, {
						"url": "16.png",
						alt: "[哇哇哭]"
					}, {
						"url": "17.png",
						alt: "[笑嘻嘻]"
					}, {
						"url": "18.png",
						alt: "[盯着你]"
					}, {
						"url": "19.png",
						alt: "[啊哈]"
					}, {
						"url": "20.png",
						alt: "[吃瓜]"
					}, {
						"url": "21.png",
						alt: "[哦吼]"
					}, {
						"url": "22.png",
						alt: "[哭死]"
					}, {
						"url": "23.png",
						alt: "[打脸]"
					}, {
						"url": "24.png",
						alt: "[斗鸡眼]"
					}],
					[{
						"url": "25.png",
						alt: "[发呆]"
					}, {
						"url": "26.png",
						alt: "[憨笑]"
					}, {
						"url": "27.png",
						alt: "[无语]"
					}, {
						"url": "28.png",
						alt: "[鸡贼]"
					}, {
						"url": "29.png",
						alt: "[大无语]"
					}, {
						"url": "30.png",
						alt: "[哭吐了]"
					}, {
						"url": "31.png",
						alt: "[呲牙笑]"
					}, {
						"url": "32.png",
						alt: "[奸笑]"
					}, {
						"url": "33.png",
						alt: "[啊啊啊]"
					}, {
						"url": "34.png",
						alt: "[哈嘿]"
					}, {
						"url": "35.png",
						alt: "[惊讶]"
					}, {
						"url": "36.png",
						alt: "[指你]"
					}, {
						"url": "37.png",
						alt: "[可爱型]"
					}, {
						"url": "38.png",
						alt: "[快哭了]"
					}, {
						"url": "39.png",
						alt: "[抠鼻屎]"
					}, {
						"url": "40.png",
						alt: "[酷酷]"
					}, {
						"url": "41.png",
						alt: "[笑汗]"
					}, {
						"url": "42.png",
						alt: "[算命]"
					}, {
						"url": "43.png",
						alt: "[红脸坏笑]"
					}, {
						"url": "44.png",
						alt: "[委屈死了]"
					}, {
						"url": "45.png",
						alt: "[爆炸]"
					}, {
						"url": "46.png",
						alt: "[吐了]"
					}, {
						"url": "47.png",
						alt: "[么么哒]"
					}, {
						"url": "48.png",
						alt: "[吐血]"
					}],
					[{
						"url": "49.png",
						alt: "[面无表情]"
					}, {
						"url": "50.png",
						alt: "[捂嘴吐]"
					}, {
						"url": "51.png",
						alt: "[斜眼看]"
					}, {
						"url": "52.png",
						alt: "[花痴]"
					}, {
						"url": "53.png",
						alt: "[被打]"
					}, {
						"url": "54.png",
						alt: "[瞌睡]"
					}, {
						"url": "55.png",
						alt: "[冥想]"
					}, {
						"url": "56.png",
						alt: "[俏皮]"
					}, {
						"url": "57.png",
						alt: "[戳手委屈]"
					}, {
						"url": "58.png",
						alt: "[端庄]"
					}, {
						"url": "59.png",
						alt: "[emmm]"
					}, {
						"url": "60.png",
						alt: "[欢呼]"
					}, {
						"url": "61.png",
						alt: "[笑哭了]"
					}, {
						"url": "62.png",
						alt: "[抱抱]"
					}, {
						"url": "63.png",
						alt: "[闭眼笑]"
					}, {
						"url": "64.png",
						alt: "[捂嘴微笑]"
					}, {
						"url": "65.png",
						alt: "[笑哭2]"
					}, {
						"url": "66.png",
						alt: "[笑嘻嘻]"
					}, {
						"url": "67.png",
						alt: "[笑露齿]"
					}, {
						"url": "68.png",
						alt: "[阴脸笑]"
					}, {
						"url": "69.png",
						alt: "[问号脸]"
					}, {
						"url": "70.png",
						alt: "[拜拜]"
					}, {
						"url": "71.png",
						alt: "[难受2]"
					}, {
						"url": "72.png",
						alt: "[傻笑2]"
					}],
					[{
						"url": "73.png",
						alt: "[爆炸2]"
					}, {
						"url": "74.png",
						alt: "[二哈]"
					}, {
						"url": "75.png",
						alt: "[二哈吐舌]"
					}, {
						"url": "76.png",
						alt: "[狗狗笑哭]"
					}, {
						"url": "77.png",
						alt: "[狗狗绿帽]"
					}, {
						"url": "78.png",
						alt: "[狗狗张嘴]"
					}, {
						"url": "79.png",
						alt: "[狗狗绿扇]"
					}, {
						"url": "80.png",
						alt: "[狗狗]"
					}, {
						"url": "81.png",
						alt: "[猫咪]"
					}, {
						"url": "82.png",
						alt: "[牛啊]"
					}, {
						"url": "83.png",
						alt: "[爱心]"
					}, {
						"url": "84.png",
						alt: "[心裂开]"
					}, {
						"url": "85.png",
						alt: "[玫瑰花]"
					}, {
						"url": "86.png",
						alt: "[枯萎]"
					}, {
						"url": "87.png",
						alt: "[棒]"
					}, {
						"url": "88.png",
						alt: "[差]"
					}, {
						"url": "89.png",
						alt: "[红药]"
					}, {
						"url": "90.png",
						alt: "[绿药]"
					}, {
						"url": "91.png",
						alt: "[抱拳]"
					}, {
						"url": "92.png",
						alt: "[ok]"
					}, {
						"url": "93.png",
						alt: "[pk]"
					}, {
						"url": "94.png",
						alt: "[绿帽子]"
					}, {
						"url": "95.png",
						alt: "[菜刀]"
					}]
				],
				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
				onlineEmoji: {
					"1.png": "1.png",
					"2.png": "2.png",
					"3.png": "3.png",
					"4.png": "4.png",
					"5.png": "5.png",
					"6.png": "6.png",
					"7.png": "7.png",
					"8.png": "8.png",
					"9.png": "9.png",
					"10.png": "10.png",
					"11.png": "11.png",
					"12.png": "12.png",

					"13.png": "13.png",
					"14.png": "14.png",
					"15.png": "15.png",
					"16.png": "16.png",
					"17.png": "17.png",
					"18.png": "18.png",
					"19.png": "19.png",
					"20.png": "20.png",
					"21.png": "21.png",
					"22.png": "22.png",
					"23.png": "23.png",
					"24.png": "24.png",

					"25.png": "25.png",
					"26.png": "26.png",
					"27.png": "27.png",
					"28.png": "28.png",
					"29.png": "29.png",
					"30.png": "30.png",
					"31.png": "31.png",
					"32.png": "32.png",
					"33.png": "33.png",
					"34.png": "34.png",
					"35.png": "35.png",
					"36.png": "36.png",

					"37.png": "37.png",
					"38.png": "38.png",
					"39.png": "39.png",
					"40.png": "40.png",
					"41.png": "41.png",
					"42.png": "42.png",
					"43.png": "43.png",
					"44.png": "44.png",
					"45.png": "45.png",
					"46.png": "46.png",
					"47.png": "47.png",
					"48.png": "48.png",

					"49.png": "49.png",
					"50.png": "50.png",
					"51.png": "51.png",
					"52.png": "52.png",
					"53.png": "53.png",
					"54.png": "54.png",
					"55.png": "55.png",
					"56.png": "56.png",
					"57.png": "57.png",
					"58.png": "58.png",
					"59.png": "59.png",
					"60.png": "60.png",

					"61.png": "61.png",
					"62.png": "62.png",
					"63.png": "63.png",
					"64.png": "64.png",
					"65.png": "65.png",
					"66.png": "66.png",
					"67.png": "67.png",
					"68.png": "68.png",
					"69.png": "69.png",
					"70.png": "70.png",
					"71.png": "71.png",
					"72.png": "72.png",

					"73.png": "73.png",
					"74.png": "74.png",
					"75.png": "75.png",
					"76.png": "76.png",
					"77.png": "77.png",
					"78.png": "78.png",
					"79.png": "79.png",
					"80.png": "80.png",
					"81.png": "81.png",
					"82.png": "82.png",
					"83.png": "83.png",
					"84.png": "84.png",

					"85.png": "85.png",
					"86.png": "86.png",
					"87.png": "87.png",
					"88.png": "88.png",
					"89.png": "89.png",
					"90.png": "90.png",
					"91.png": "91.png",
					"92.png": "92.png",
					"93.png": "93",
					"94.png": "94.png",
					"95.png": "95.png"
				},
				//红包相关参数
				windowsState: '',
				redenvelopeData: {
					rid: null, //红包ID
					from: null,
					face: null,
					blessing: null,
					money: null
				},
				pageTitle: '',
				params: {
					//聊天记录分页参数
					pageNum: 1,
					pageSize: 20,
					chatId: ""
				},
				hasMore: true,
				keyboardHeight: 0, // 键盘高度
				showKeyNum: 0, //键盘打开的次数
			};
		},
		onLoad(option) {
			let {
				name,
				chatId
			} = option
			this.pageTitle = name
			this.chatId = chatId
			this.params.chatId = chatId

			// 首次
			this.initSendMsg(9)

			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
			this.getChatMessage()
		},
		onShow() {
			this.scrollTop = 9999999;
		},
		methods: {
			//首次发送消息
			initSendMsg(type) {
				this.$socket.connectSocketInit(() => {
					this.$socket.send(JSON.stringify({
						type: type,
						chatId: this.chatId,
					}))
					//获取消息的函数
					this.$socket.getMessage(this.screenMsg);
				})
			},
			// // 连接websocket
			// connectWebsocket() {
			// 	// const token = getToken()
			// 	const token = uni.getStorageSync('token')
			// 	this.$socket.token = token;
			// 	this.$socket.chatId = this.chatId;
			// 	this.$socket.connectSocketInit(() => {
			// 		//获取消息的函数
			// 		this.$socket.getMessage(this.screenMsg);
			// 	});
			// },
			leftClick() {
				this.initSendMsg(10)
			},
			//获取消息列表
			async getMessageList() {
				let res = await this.$u.api.getchatMessagelist(this.params)
				if (res.code == 200) {
					if (!this.hasMore) {
						return
					}
					let newChat = res.rows.reverse();
					newChat = newChat.map(i => {
						const chat = {}
						chat.type = "user"
						chat.isSendYour = i.isSendYour
						if (i.type == 3) {
							i.content = JSON.parse(i.content)
						}
						chat.msg = {
							id: new Date(i.createTime).getTime(),
							type: i.type,
							time: i.createTime,
							content: {
								text: i.content,
								gender: i.content.gender == "male_photography" ? "男" : "女",
								phone: i.content.phone,
								type: i.content.type,
								avatar: this.$u.fileBaseUrl + i.content.avatar,
								nickname: i.content.nickname,
							}
						}
						chat.msg.userinfo = {
							uid: i.userId,
							username: i.userName,
							face: i.userAvatar ? this.$u.fileBaseUrl + i.userAvatar :
								'../../static/images/me/default-avatar-orange.png',
						}

						if (i.type == 2) {
							this.msgImgList.push(this.$u.fileBaseUrl + i.content);
						}
						return chat
					})
					this.msgList.unshift(...newChat)
					this.hasMore = this.msgList.length < res.total
				}
			},
			//获取首次进入页面的消息
			async getChatMessage() {
				await this.getMessageList()
				// 滚动到底部
				this.scrollTop = 999999
				this.$nextTick(function() {
					//进入页面滚动到底部
					this.scrollTop = 9999999;
					this.$nextTick(function() {
						this.scrollAnimation = true;
					});
				});
			},
			// 接受消息(筛选处理)
			screenMsg(msg) {
				if (msg.chatId != this.chatId) return;
				// 用户消息
				switch (msg.type) {
					case 1:
						this.addTextMsg(msg);
						break;
					case 'voice':
						this.addVoiceMsg(msg);
						break;
					case 2:
						this.addImgMsg(msg);
						break;
					case 3:
						this.addbusinesscard(msg);
						break;
					case 5:
						this.addsystemTextMsg(msg);
						break;
					case 'redEnvelope':
						this.addRedEnvelopeMsg(msg);
						break;
				}
				//非自己的消息震动
				// if (msg.isSendYour == 0) {
				// 	uni.vibrateLong();
				// }

				this.$nextTick(function() {
					// 滚动到底
					this.scrollToView = 'msg' + new Date(msg.sendTime).getTime()
				});
			},

			//触发滑动到顶部(加载历史信息记录)
			async loadHistory(e) {
				if (this.isHistoryLoading) {
					return;
				}
				this.params.pageNum += 1
				this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
				this.scrollAnimation = false; //关闭滑动动画
				let Viewid = this.msgList[0].msg.id; //记住第一个信息ID
				await this.getMessageList()

				this.$nextTick(function() {
					this.scrollToView = 'msg' + Viewid; //跳转上次的第一行信息位置
					this.$nextTick(function() {
						this.scrollAnimation = true; //恢复滚动动画
					});
				});
				this.isHistoryLoading = false;

			},

			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},

			//更多功能(点击+弹出) 
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			// 名片发送
			businesscard() {
				this.sendMsg('', 3);
			},
			//拍照发送
			camera() {
				this.getImage('camera');
			},
			chooseImage() {
				this.getImage('album');
			},
			//选照片 or 拍照
			getImage(type) {
				this.hideDrawer();
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const result = await this.$u.api.uploadFile(res.tempFilePaths[i])
							let msg = {
								text: result.fileName
							}
							this.sendMsg(msg, 2);
							// uni.getImageInfo({
							// 	src: res.tempFilePaths[i],
							// 	success: (image) => {
							// 		console.log(image.width);
							// 		console.log(image.height);
							// 		let msg = {
							// 			url: res.tempFilePaths[i],
							// 			w: image.width,
							// 			h: image.height
							// 		};
							// 	}
							// });
						}
					}
				});
			},
			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},
			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus(e) {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
			},
			// // 回车
			// handleInput(event) {
			// 	const value = event.mp.detail.value;
			// 	if (value.includes('\n')) {
			// 		this.sendText()
			// 	}
			// },
			// 发送文字消息
			async sendText() {
				this.hideDrawer(); //隐藏抽屉
				if (!this.textMsg) {
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				let msg = {
					text: content
				}
				this.sendMsg(msg, 1);
				this.textMsg = ''; //清空输入框
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = 'https://zhoukaiwen.com/img/icon/emojj1/'
								let imgstr = '<img width="23rpx" src="' + onlinePath + this.onlineEmoji[EM.url] +
									'">';
								return imgstr;
							}
						}
					}
				});
				// console.log('发送表情');
				return '<div style="display:flex;align-items:center;word-wrap:break-word;flex-wrap: wrap;white-space: pre-line;">' +
					replacedStr + '</div>';
			},

			// 发送消息
			async sendMsg(content, type) {
				// let res = await this.$u.api.getchatMessage({
				// 	type,
				// 	chatId: this.chatId,
				// 	message: content.text
				// })
				if (content) {
					this.$socket.send(JSON.stringify({
						type,
						chatId: this.chatId,
						content: content.text
					}))
				} else {
					this.$socket.send(JSON.stringify({
						type,
						chatId: this.chatId,
					}))
				}
				// 发送消息
				// this.screenMsg(msg);
			},

			// 添加文字消息到列表
			addTextMsg(msg) {
				uni.showLoading({
					title: '消息发送中'
				})
				msg = {
					isSendYour: msg.isSendYour,
					type: "user",
					msg: {
						id: new Date(msg.sendTime).getTime(),
						type: 1,
						time: msg.sendTime,
						userinfo: {
							username: msg.userName,
							face: this.$u.fileBaseUrl + msg.userAvatar
						},
						content: {
							text: msg.content
						}
					}
				}
				this.msgList.push(msg);
				setTimeout(() => {
					uni.hideLoading()
				}, 100)
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.push(msg);
			},
			// 发送名片
			addbusinesscard(msg) {
				// console.log('msg', msg);
				if (msg.type == 3) {
					msg.content = JSON.parse(msg.content)
				}
				let newmsg = {
					isSendYour: msg.isSendYour,
					type: "user",
					msg: {
						id: new Date(msg.sendTime).getTime(),
						type: 3,
						time: msg.sendTime,
						userinfo: {
							username: msg.userName,
							face: this.$u.fileBaseUrl + msg.userAvatar,
						},
						content: {
							gender: msg.content.gender == "male_photography" ? "男" : "女",
							phone: msg.content.phone,
							type: msg.content.type,
							avatar: this.$u.fileBaseUrl + msg.content.avatar,
							nickname: msg.content.nickname,
							text: msg.content,
						}
					}
				}
				this.msgList.push(newmsg);
				this.msgImgList.push(this.$u.fileBaseUrl + msg.content);
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				let newmsg = {
					isSendYour: msg.isSendYour,
					type: "user",
					msg: {
						id: new Date(msg.sendTime).getTime(),
						type: 2,
						time: msg.sendTime,
						userinfo: {
							username: msg.userName,
							face: this.$u.fileBaseUrl + msg.userAvatar
						},
						content: {
							text: msg.content
						}
					}
				}
				this.msgList.push(newmsg);
				this.msgImgList.push(this.$u.fileBaseUrl + msg.content);
				// msg.msg.content = this.setPicSize(msg.msg.content);
			},
			addRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addsystemTextMsg(msg) {
				let newmsg = {
					type: "system",
					msg: {
						id: new Date(msg.sendTime).getTime(),
						type: 5,
						content: {
							text: msg.content
						}
					}
				}
				// console.log(newmsg);
				this.msgList.push(newmsg);
			},
			// 预览图片
			showPic(msg) {
				// console.log(this.msgImgList);
				uni.previewImage({
					indicator: "none",
					current: this.$u.fileBaseUrl + msg.content.text,
					urls: this.msgImgList
				});
			},
			// 时间方法
			formatMessageTime(messageTime) {
				const currentTime = new Date();
				const currentDateString = currentTime.toDateString();

				const messageDate = new Date(messageTime);
				const messageDateString = messageDate.toDateString();

				if (currentDateString === messageDateString) {
					// 今天的消息
					const hours = messageDate.getHours().toString().padStart(2, '0');
					const minutes = messageDate.getMinutes().toString().padStart(2, '0');
					return `${hours}:${minutes}`;
				} else if (currentTime - messageDate < 24 * 60 * 60 * 1000) {
					// 昨天的消息
					return "昨天";
				} else {
					// 其他日期的消息
					const year = messageDate.getFullYear();
					const month = (messageDate.getMonth() + 1).toString().padStart(2, '0');
					const day = messageDate.getDate().toString().padStart(2, '0');
					return `${year}/${month}/${day}`;
				}
			},
			// 拨打电话
			getPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber //仅为示例，并非真实的电话号码
				})
			},
			// 播放语音
			// playVoice(msg) {
			// 	this.playMsgid = msg.id;
			// 	this.AUDIO.src = msg.content.url;
			// 	this.$nextTick(function() {
			// 		this.AUDIO.play();
			// 	});
			// },
			// 录音开始
			// voiceBegin(e) {
			// 	if (e.touches.length > 1) {
			// 		return;
			// 	}
			// 	this.initPoint.Y = e.touches[0].clientY;
			// 	this.initPoint.identifier = e.touches[0].identifier;
			// 	this.RECORDER.start({
			// 		format: "mp3"
			// 	}); //录音开始,
			// },
			// //录音开始UI效果
			// recordBegin(e) {
			// 	this.recording = true;
			// 	this.voiceTis = '松开 结束';
			// 	this.recordLength = 0;
			// 	this.recordTimer = setInterval(() => {
			// 		this.recordLength++;
			// 	}, 1000)
			// },
			// // 录音被打断
			// voiceCancel() {
			// 	this.recording = false;
			// 	this.voiceTis = '按住 说话';
			// 	this.recordTis = '手指上滑 取消发送'
			// 	this.willStop = true; //不发送录音
			// 	this.RECORDER.stop(); //录音结束
			// },
			// // 录音中(判断是否触发上滑取消发送)
			// voiceIng(e) {
			// 	if (!this.recording) {
			// 		return;
			// 	}
			// 	let touche = e.touches[0];
			// 	//上滑一个导航栏的高度触发上滑取消发送
			// 	if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
			// 		this.willStop = true;
			// 		this.recordTis = '松开手指 取消发送'
			// 	} else {
			// 		this.willStop = false;
			// 		this.recordTis = '手指上滑 取消发送'
			// 	}
			// },
			// // 结束录音
			// voiceEnd(e) {
			// 	if (!this.recording) {
			// 		return;
			// 	}
			// 	this.recording = false;
			// 	this.voiceTis = '按住 说话';
			// 	this.recordTis = '手指上滑 取消发送'
			// 	this.RECORDER.stop(); //录音结束
			// },
			// //录音结束(回调文件)
			// recordEnd(e) {
			// 	clearInterval(this.recordTimer);
			// 	if (!this.willStop) {
			// 		console.log("e: " + JSON.stringify(e));
			// 		let msg = {
			// 			length: 0,
			// 			url: e.tempFilePath
			// 		}
			// 		let min = parseInt(this.recordLength / 60);
			// 		let sec = this.recordLength % 60;
			// 		min = min < 10 ? '0' + min : min;
			// 		sec = sec < 10 ? '0' + sec : sec;
			// 		msg.length = min + ':' + sec;
			// 		this.sendMsg(msg, 'voice');
			// 	} else {
			// 		console.log('取消发送录音');
			// 	}
			// 	this.willStop = false;
			// },
			// // 切换语音/文字输入
			// switchVoice() {
			// 	this.hideDrawer();
			// 	this.isVoice = this.isVoice ? false : true;
			// },
			discard() {
				return;
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../uni_modules/css/style.scss";

	.content .showLayer {
		transform: translate3d(0, -43vw, 0);
	}

	.msgImg {
		width: 220rpx;
		height: 220rpx;
	}

	.chat-box {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.content {
			flex: 1;
			position: relative;
		}
	}
</style>